<template>
  <div class="layout layout-100">
    <Layout class="layout-100">
      <Header class="header-cont main__title--top">{{this.$route.params.name}}</Header>
      <Content class="content-cont">
        <Form  ref="formData" :model="formData" label-position="top" :show-message="false">
          <FormItem label="作业风险等级" prop="riskLevel" :required="$route.params.type !== 'details'">
            <Select class="width50" transfer :multiple="$route.params.type === 'add'" v-model.trim="formData.riskLevel" @on-open-change="riskLevelBtn" @on-change="riskLevelChange" placeholder="请选择作业风险等级"  :disabled="$route.params.type === 'details'">
              <Option v-for="item in riskLevelList" :value="item.id" :key="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="管控措施" prop="controlMeasures" :required="$route.params.type !== 'details'">
            <Input class="width50" v-model.trim="formData.controlMeasures" :maxlength="300" :disabled="$route.params.type === 'details'"></Input>
          </FormItem>
          <FormItem label="频次" prop="frequencyId">
            <Select class="width50" v-model="formData.frequencyId" placeholder="请选择频次"  :disabled="$route.params.type === 'details'">
              <Option v-for="item in frequencyList" :value="item.id" :key="item.id">{{item.frequencyName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="动态管控岗" prop="dictList[0]" :required="$route.params.type !== 'details'">
            <Table border ref="selection" :columns="columns" :data="formData.dictList"></Table>
          </FormItem>
        </Form>
      </Content>
      <Footer class="footer-cont" v-show="$route.params.type !== 'details'">
        <Button type="primary" @click="saveSubmit('formData')">保存</Button>
        <Button @click="closetab">取消</Button>
      </Footer>
    </Layout>
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    name: "AddEditorDetails",
    data(){
      return{
        formData:{
          riskLevel:'',
          frequencyId:'',
          controlMeasures:'',
          dictList:[
            {
              projectManagementDepartment:'',
              projectManagementLeader:'',
              leaderInChargeOfProjectDepartment:'',
              controlDepartmentOfEngineeringCompany:'',
              leaderInChargeOfEngineeringCompany:'',
              groupCompanyControlDepartment:'',
              leaderInChargeOfGroupCompany:'',
            }
          ],
        },
        frequencyList:[],
        riskLevelList:[
          {id:'1',name:'一级'},
          {id:'2',name:'二级'},
          {id:'3',name:'三级'},
          {id:'4',name:'四级'},
        ],
        columns:[
          {
            title:'项目部管控部门',
            key:'projectManagementDepartment',
            slot:'action',
            render: (h, params) => {
              var vm = this;
              return h('Input', {
                props: {
                  maxlength:"20",
                  value: params.row.projectManagementDepartment,
                  disabled:!!!((vm.formDatafunction12() || vm.formDatafunction3() || vm.formDatafunction4()) && !(this.$route.params.type === 'details'))
                },
                on:{
                  'on-change' (event) {
                    params.row.projectManagementDepartment = event.target.value;
                    vm.formData.dictList[params.index] = params.row;
                  }
                }
              })
            }
          },
          {
            title:'项目部分管领导',
            key:'projectManagementLeader',
            slot:'action',
            render: (h, params) => {
              var vm = this;
              return h('Input', {
                props: {
                  maxlength:"20",
                  value: params.row.projectManagementLeader,
                  disabled:!!!((vm.formDatafunction12() || vm.formDatafunction3() || vm.formDatafunction4()) && !(this.$route.params.type === 'details'))
                },
                on:{
                  'on-change' (event) {
                    params.row.projectManagementLeader = event.target.value;
                    vm.formData.dictList[params.index] = params.row;
                  }
                }
              })
            }
          },{
            title:'项目部主管领导',
            key:'leaderInChargeOfProjectDepartment',
            slot:'action',
            render: (h, params) => {
              var vm = this;
              return h('Input', {
                props: {
                  maxlength:"20",
                  value: params.row.leaderInChargeOfProjectDepartment,
                  disabled:!!!((vm.formDatafunction12() || vm.formDatafunction3() || vm.formDatafunction4()) && !(this.$route.params.type === 'details'))
                },
                on:{
                  'on-change' (event) {
                    params.row.leaderInChargeOfProjectDepartment = event.target.value;
                    vm.formData.dictList[params.index] = params.row;
                  }
                }
              })
            }
          },{
            title:'工程公司管控部门',
            key:'controlDepartmentOfEngineeringCompany',
            slot:'action',
            render: (h, params) => {
              var vm = this;
              return h('Input', {
                props: {
                  maxlength:"20",
                  value: params.row.controlDepartmentOfEngineeringCompany,
                  disabled:!!!((vm.formDatafunction12() || vm.formDatafunction3()) && !(this.$route.params.type === 'details'))
                },
                on:{
                  'on-change' (event) {
                    params.row.controlDepartmentOfEngineeringCompany = event.target.value;
                    vm.formData.dictList[params.index] = params.row;
                  }
                }
              })
            }
          },{
            title:'工程公司分管领导',
            key:'leaderInChargeOfEngineeringCompany',
            slot:'action',
            render: (h, params) => {
              var vm = this;
              return h('Input', {
                props: {
                  maxlength:"20",
                  value: params.row.leaderInChargeOfEngineeringCompany,
                  disabled:!!!((vm.formDatafunction12() ||vm.formDatafunction3()) && !(this.$route.params.type === 'details'))
                },
                on:{
                  'on-change' (event) {
                    params.row.leaderInChargeOfEngineeringCompany = event.target.value;
                    vm.formData.dictList[params.index] = params.row;
                  }
                }
              })
            }
          },{
            title:'集团公司管控部门',
            key:'groupCompanyControlDepartment',
            slot:'action',
            render: (h, params) => {
              var vm = this;
              return h('Input', {
                props: {
                  maxlength:"20",
                  value: params.row.groupCompanyControlDepartment,
                  disabled:!!!((vm.formDatafunction12()) && !(this.$route.params.type === 'details'))
                },
                on:{
                  'on-change' (event) {
                    params.row.groupCompanyControlDepartment = event.target.value;
                    vm.formData.dictList[params.index] = params.row;
                  }
                }
              })
            }
          },{
            title:'集团公司分管领导',
            key:'leaderInChargeOfGroupCompany',
            slot:'action',
            render: (h, params) => {
              var vm = this;
              return h('Input', {
                props: {
                  maxlength:"20",
                  value: params.row.leaderInChargeOfGroupCompany,
                  disabled:!!!((vm.formDatafunction12()) && !(this.$route.params.type === 'details'))
                },
                on:{
                  'on-change' (event) {
                    params.row.leaderInChargeOfGroupCompany = event.target.value;
                    vm.formData.dictList[params.index] = params.row;
                  }
                }
              })
            }
          },
        ],

      }
    },
    methods:{
      ...mapMutations([
        'closeTag'
      ]),
      closetab () {
        this.closeTag({
          name: this.$route.name,
          params: {...this.$route.params},
          query:{...this.$route.query}
        });
        this.$router.push({path:'/risk-source-library/measures-library'})
      },
      riskLevelBtn(e){
        if(!e){
          this.formDatafunction12()
          this.formDatafunction3()
          this.formDatafunction4()
        }
      },
      riskLevelChange(){
        if(this.formData.riskLevel=='' ){
          this.formData.dictList[0].projectManagementDepartment = '';
          this.formData.dictList[0].projectManagementLeader = '';
          this.formData.dictList[0].leaderInChargeOfProjectDepartment = '';
          this.formData.dictList[0].controlDepartmentOfEngineeringCompany = '';
          this.formData.dictList[0].leaderInChargeOfEngineeringCompany = '';
          this.formData.dictList[0].groupCompanyControlDepartment = '';
          this.formData.dictList[0].leaderInChargeOfGroupCompany = '';
        }
        if(this.formData.riskLevel=='3' ){
          this.formData.dictList[0].groupCompanyControlDepartment = '';
          this.formData.dictList[0].leaderInChargeOfGroupCompany = '';
        }
        if(this.formData.riskLevel=='4' ){
          this.formData.dictList[0].controlDepartmentOfEngineeringCompany = '';
          this.formData.dictList[0].leaderInChargeOfEngineeringCompany = '';
          this.formData.dictList[0].groupCompanyControlDepartment = '';
          this.formData.dictList[0].leaderInChargeOfGroupCompany = '';
        }
      },
      formDatafunction12(){
        if(this.formData.riskLevel.indexOf('1')>-1 || this.formData.riskLevel.indexOf('2')>-1){
          return true;
        }else {
          return false;
        }
      },formDatafunction3(){
        if(this.formData.riskLevel.indexOf('3')>-1 ){
          return true
        }else {
          return false;
        }
      },formDatafunction4(){
        if(this.formData.riskLevel.indexOf('4')>-1 ){
          return true;
        }else {
          return false;
        }
      },
      //频次
      getFrequencyList() {
        this.$api.measuresLibrary.getFrequencyList().then(res => {
          if (res.code === 200) {
            this.frequencyList = res.data;
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      saveSubmit(){
        if(!this.formData.riskLevel.toString()){
          this.$Message.warning('请选择作业风险等级');
          return
        }
        if(!this.formData.controlMeasures){
          this.$Message.warning('请输入管控措施');
          return
        }
        let params = {
          "riskOperationId": this.$route.query.riskOperationId,//"风险作业",
          "riskLevel": this.formData.riskLevel.toString(),//"风险作业等级（1：1级，2：2级，3：3级，4：4级）",
          "measureType": this.$route.query.measureType,//"措施类型（1：管理，2：技术）",
          "controlMeasures": this.formData.controlMeasures,//"管控措施",
          "frequencyId": this.formData.frequencyId,//"频次ID",
          "projectManagementDepartment": this.formData.dictList[0].projectManagementDepartment,//"项目部管控部门",
          "projectManagementLeader": this.formData.dictList[0].projectManagementLeader,//"项目部分管领导",
          "leaderInChargeOfProjectDepartment": this.formData.dictList[0].leaderInChargeOfProjectDepartment,//"项目部主管领导",
          "controlDepartmentOfEngineeringCompany": this.formData.dictList[0].controlDepartmentOfEngineeringCompany,//"工程公司管控部门",
          "leaderInChargeOfEngineeringCompany": this.formData.dictList[0].leaderInChargeOfEngineeringCompany,//"工程公司分管领导",
          "groupCompanyControlDepartment": this.formData.dictList[0].groupCompanyControlDepartment,//"集团公司管控部门",
          "leaderInChargeOfGroupCompany": this.formData.dictList[0].leaderInChargeOfGroupCompany,//"集团公司分管领导"
        }
        if(this.$route.params.type === 'add'){
          params.riskOperationId = this.$route.params.riskOperationId;
          params.measureType = this.$route.params.measureType;
          this.$api.measuresLibrary.getmeasuresLibraryAdd(params).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message);
              this.closetab();
            } else {
              this.$Message.error(res.message)
            }
          })
        }else {
          params.id = this.$route.params.id;
          this.$api.measuresLibrary.getmeasuresLibraryupdate(params).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message);
              this.closetab();
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      },
      //详情
      getmeasuresLibrarydetails(id) {
        this.$api.measuresLibrary.getmeasuresLibrarydetails(id).then(res => {
          if (res.code === 200) {
            this.formData.riskLevel = res.data.riskLevel.split(',');
            this.formData.controlMeasures = res.data.controlMeasures;
            this.formData.frequencyId = res.data.frequencyId;
            this.formData.dictList[0].projectManagementDepartment = res.data.projectManagementDepartment;
            this.formData.dictList[0].projectManagementLeader = res.data.projectManagementLeader;
            this.formData.dictList[0].leaderInChargeOfProjectDepartment = res.data.leaderInChargeOfProjectDepartment;
            this.formData.dictList[0].controlDepartmentOfEngineeringCompany = res.data.controlDepartmentOfEngineeringCompany;
            this.formData.dictList[0].leaderInChargeOfEngineeringCompany = res.data.leaderInChargeOfEngineeringCompany;
            this.formData.dictList[0].groupCompanyControlDepartment = res.data.groupCompanyControlDepartment;
            this.formData.dictList[0].leaderInChargeOfGroupCompany = res.data.leaderInChargeOfGroupCompany;
          } else {
            this.$Message.error(res.message)
          }
        })
      },

    },
    mounted() {
      this.getFrequencyList();
      if(this.$route.params.type === 'editor' || this.$route.params.type === 'details'){
        this.getmeasuresLibrarydetails(this.$route.params.id)
      }
    }
  };
</script>

<style lang="scss" scoped>
  .width50{
    width: 40%;
  }
</style>
